<template>
  <div class="wrap">
    <div id="line"
         ref="line" />
  </div>
</template>

<script>
import Echarts from 'echarts'

// echarts字体大小适配
const font = document.documentElement.clientWidth
window.echartsFont = font / 1920

export default {
  components: {},
  props: {},
  data () {
    return {
      option: {
        title: {
          text: '柱状折线图',
          left: 'center',
          y: '10',
          textStyle: {
            color: '#fff'
          }
        },
        backgroundColor: '#1c2e40',
        color: '#384757',
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            if (params.length > 0) {
              let html = `${params[0]['name']}</br>`
              console.log(params)
              for (let i = 0; i < params.length; i++) {
                if (i !== 2) {
                  html += `${params[i]['seriesName']}:${params[i]['value']}</br>`
                } else {
                  html += `${params[i]['seriesName']}:${params[i]['value']}%</br>`
                }
              }
              if (params[1]['value'] - params[0]['value'] > 0) {
                html += `<div><span>差异</span>：<span>${params[1]['value'] - params[0]['value']}</span> </div>`
              } else {
                html += `<div><span>差异</span>：<span style="color:red">${params[1]['value'] - params[0]['value']}</span> </div>`
              }
              return html
            }
          },
          background: 'rgba(0,0,0,.1)'
        },
        legend: {
          data: [
            {
              name: '目标',
              icon: 'react',
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: '实际',
              icon: 'react',
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: '完成率',
              icon: 'image://./static/img/chart-line.png',
              textStyle: { color: '#fff' }
            }
          ],
          selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭
          top: '10%',
          textStyle: {
            'color': '#fff'
          },
          itemWidth: 36 * window.echartsFont,
          itemHeight: 23 * window.echartsFont
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1时',
              '2时',
              '3时',
              '4时',
              '5时',
              '6时'
            ],
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'rgba(0,0,0,0.1)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            boundaryGap: [0, 0]
          }
        ],
        yAxis: [
          {
            name: '完成量',
            type: 'value',
            nameTextStyle: {
              color: '#fff'
            },
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false,
              length: 5
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            splitArea: {
              show: true,
              interval: 1,
              areaStyle: {
                color: ['rgba(0,65,131,0.1)', 'rgba(0,0,0,0)']
              }
            },
            boundaryGap: [0, 0.2]
          },
          {
            name: '完成率',
            type: 'value',
            nameTextStyle: {
              color: '#fff'
            },
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              show: true,
              formatter: '{value} %',
              textStyle: {
                color: '#fff'
              }

            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false,
              length: 10
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            splitArea: {
              show: true,
              interval: 1,
              areaStyle: {
                color: ['rgba(0,65,131,0.1)', 'rgba(0,0,0,0)']
              }
            },
            boundaryGap: [0, 0.2]
          }
        ],
        grid: {
          top: '20%'
        },
        series: [
          {
            name: '目标',
            type: 'bar',
            data: [
              10,
              20,
              50,
              20,
              20,
              20
            ],
            barWidth: 'auto',
            label: {
              show: true,
              position: 'top',
              distance: 5,
              color: '#fff'
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#009ff7' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: '#0047cf' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false
                }
              }
            },
            barGap: '10%'
          },
          {
            name: '实际',
            type: 'bar',
            data: [
              20,
              12,
              40,
              30,
              10,
              15
            ],
            barWidth: 'auto',
            label: {
              show: true,
              position: 'top',
              distance: 5,
              color: '#fff'
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#b57cfe' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: '#5c10e5' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false
                }
              }
            },
            barGap: '10%'
          },
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'image://./static/img/chart-circle.png',
            symbolSize: 10 * window.echartsFont,
            label: {
              show: true,
              position: 'top',
              distance: 5,
              color: '#fff'
            },
            itemStyle: {
              normal: {
                color: '#23e8dc'
              }
            },
            lineStyle: {
              normal: {
                color: '#23e8dc',
                width: 2.5
              }
            },
            smooth: true,
            data: [
              200,
              60,
              80,
              150,
              50,
              75
            ]

          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  beforeDestroy () {

  },
  methods: {
    setEcharts () {
      const dom = this.$refs.line
      Echarts.dispose(dom)
      this.myEcharts = Echarts.init(dom)
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#line {
  margin: 0 auto;
  width: 160vh;
  height: 80vh;
}
</style>
